<template>
  <div class="home">
    <!-- tabbar的坑位 -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" class="home_ct" />
      </keep-alive>
    </router-view>
    <!-- route 开启路由模式 -->
    <van-tabbar route active-color="#ee0a24">
      <!-- replace 替换的意思 tabbar 切换的时候，我们一般，不让他放到历史记录里面 -->
      <van-tabbar-item replace to="/index" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/cate" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item replace to="/cart" icon="shopping-cart-o" :badge="cartList.length"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/user" icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "Home",
  computed: {
    ...mapState(["cartList"]),
  },
};
</script>
<style lang="scss">
.home {
  .home_ct {
    height: calc(100% - 50px);
    overflow-y: scroll;
  }
  p {
    font-size: 16px;
  }
  .box {
    height: 30px;
    background-color: skyblue;
    width: 750px;
  }
}
</style>
